<template>
  <span class="node-name-title" >
    <span v-if="!state.isInput" @click.stop="clickEvent()">{{ value||'请选择功能' }}</span>
    <el-select ref="editSelectRef" v-if="state.isInput" :automatic-dropdown="true"  :clearable="true" @visible-change="onVisibleChange" v-model="value"  >
      <el-option
        v-for="item in props.options"
        :key="item.funcCode"
        :label="item.funcTitle"
        :value="item.funcCode"
      />
    </el-select>
  </span>
</template>
<script lang="ts" setup name="SelectFunction">
//------------------接收传入参数(组件)-------------------
const props = defineProps({
	modelValue: String,
  funcTitle:String,
  options:{
    type: Array,
    default: function() {
      return [{funcCode:'123',funcTitle:'测试'}];
    },
  }
});
const editSelectRef=ref();
const value=ref(props.modelValue)
const state=reactive({ isInput: false })
// 定义子组件向父组件传值/事件
const emit = defineEmits(['edit', 'update:modelValue','update:funcTitle']);
const clickEvent=()=> {
  state.isInput = true;
  nextTick(()=>{
    editSelectRef.value.focus()
  })
  
  emit('edit', false);
}
const onVisibleChange=(val)=> {
  if(!val){
    state.isInput = false;
    let func=props.options.filter(item => item.funcCode == value.value);
    let funcTitle=""
    if(func&&func.length>0){
      funcTitle=func[0].funcTitle
    }
    emit('update:modelValue', value.value);
    emit('update:funcTitle', funcTitle);
    emit('edit', true);
  }
  
}

</script>
